import styled from "@emotion/styled";
import { Card, CardProps } from "antd";
import React, { useState } from "react";

interface MyCardButton {
    title: string
    action: () => void
    index?: number
}

interface MyCardProps extends CardProps {
    buttons?: Array<MyCardButton>
    groupkey: string
}

const MyCard: React.FC<MyCardProps> = (props) => {
    const [style, setStyle] = useState<any>()

    const onMouseDown = () => {
        setStyle({ opacity: 0.6 })
    }
    const onMouseUp = () => {
        setStyle(null)
    }

    const button = ({ action, title, index }: MyCardButton) => {
        return <StyledButton style={style} key={`${props.groupkey}_Extra_${index}`} onMouseDown={onMouseDown} onMouseUp={onMouseUp} onClick={action}>{title}</StyledButton>
    }
    const getExtra = ({ buttons = [] }: MyCardProps) => {
        let btn: Array<any> = []
        buttons.forEach((item, index) => {
            btn.push(button({ ...item, index }))
        });
        return btn
    }
    return <StyledCard type="inner" {...props} extra={<>{getExtra(props)}</>} bordered={props.bordered || false}>
        {props.children}
    </StyledCard>
}

const StyledCard = styled(Card)`
width: 100%;
`
const StyledButton = styled.span`
color: #1890ff;
cursor: pointer;
user-select: none;
`

export default MyCard


